<template>
	<div class="wrap receiveAddress" style="padding-bottom:20px">
    <!-- 收貨地址部分 -->
    <div class="address_title">
        <div>送貨類型</div>
        
      </div>
      <div class="address flexbox">
      
      <div class=" selectGet"  :class="selectGetActive==0?'active':''" @click="selectGetActives(0)">
        <img src="@/assets/img/self.png" v-if="selectGetActive == 0" alt=""><img src="@/assets/img/self1.png" v-if="selectGetActive != 0" alt=""><div class="">自提點取貨</div>
      </div>
      <div class=" selectGet" :class="selectGetActive==1?'active':''" @click="selectGetActives(1)">
        <img src="@/assets/img/deliver.png" v-if="selectGetActive ==1" alt=""><img src="@/assets/img/deliver1.png" v-if="selectGetActive!= 1" alt=""><div class="">送貨</div>
      </div>
    </div>
    <div class="address_title" v-if="selectGetActive == 0">
      <div>自提點地址</div>
    </div>
    <div class="address" v-if="selectGetActive == 0">
      <div class="address_content"  >
        <div class="address_con_item2" style="position:relative" >
          <div class="address_con2">
            <div class="address_name">
              <div>幸福滋味中心自提點</div>
              <div>23271777</div>
            </div>
            <div class="address_pro">
              <div>九龍荔枝角道838號勵豐中心7樓705-706室</div>
            </div> 
            <!-- <div class="address_detail">九龍荔枝角道838號勵中心7樓705-706室</div> -->
          </div>          
          <img src="@/assets/img/2020-11-12_140140.png" style="position:absolute; bottom:0; right:0;width:20px" alt="">
        </div>  
      </div>
      <div class="selfTit">取貨日期</div>
      <el-date-picker
      v-model="picktime"
      value-format='yyyy-MM-dd'
      type="date"
      placeholder="請選擇取貨日期">
    </el-date-picker>
      <div style="display:flex">
        <div class="selfTit">營業（自提）時間：</div> 
        <div>
          <div class="selfTit">周—至周五：10:00-21:00</div>
          <div class="selfTit">周六：12:00-19:00</div>
          <div class="selfTit">周日及公衆假期休息</div>
        </div>
      </div>
    </div>

    <div class="address_title" v-if="selectGetActive == 1">
      <div>收貨信息</div>
      <div @click="addAddress">新增收貨地址</div>
    </div>
    <div class="address" v-if="selectGetActive == 1">
      <div class="address_content" v-if="addresslist.length != 0">
        <div class="address_con_item" :class="item.isDefault?'active':''" v-for="(item,index) in addresslist" :key='index' >
          <div class="address_con">
            <div class="address_name">
              <div>{{item.name}}</div>
              <div>{{item.tel}}</div>
            </div>
            <div class="address_pro">
              <div>{{item.province}}</div>
              <div>{{item.city}}</div>
              <div>{{item.county}}</div>
            </div>
            <div class="address_detail">{{item.addressDetail}}</div>
            <div class="address_other">
              <div @click="changeDefault(index, item)">設為默認</div>
              <div>
                <div  @click="handleEdit(index, item)">修改</div>
                <div class="rightp" @click="handleDelete(index, item)">刪除</div>
              </div>
            </div>
          </div>    
          <img src="@/assets/img/2020-11-12_140140.png" style="position:absolute; bottom:0; right:0;width:20px" alt="" v-show="item.isDefault">      
        </div>  
      </div>
      <div class="address_content nohaveshop" v-if="addresslist.length == 0">
        <p class="p1">地址信息不能為空~~</p>
      </div>
    </div>
    <!-- 購物車部分 -->
    <div class="content">
      <!-- 購物車表格 -->
      <el-table :data="cartProducts1" style="width: 100%"  ref="singleTable" :header-cell-style="tableHeaderColor">
        <el-table-column label="序號" align="center"  width="100">
            <template slot-scope="scope">{{(scope.$index)+1}}</template>
        </el-table-column>
        <el-table-column label="商品信息" align="center">
            <template slot-scope="scope">
              <div class="goodMsg">
                <img :src="scope.row.litemallGoods.picUrl">
                <div>{{scope.row.litemallGoods.name}}</div>   
              </div>                      
            </template>
        </el-table-column>
        <el-table-column label="單價" align="center">
            <template slot-scope="scope">
              <div class="priceBox" v-if="scope.row.litemallGoods.counterPrice == scope.row.litemallGoods.retailPrice">
                <div>${{scope.row.litemallGoods.counterPrice}}</div>
                <!-- <div>原價:${{scope.row.litemallGoods.retailPrice}}</div> -->
              </div>              
              <div class="priceBox" v-else>
                <div>${{scope.row.litemallGoods.counterPrice}}</div>
                <div style="color:#999">${{scope.row.litemallGoods.retailPrice}}</div>
              </div>              
            </template>
        </el-table-column>
		    <el-table-column label="數量" align="center">
		    	<template slot-scope="scope">
            <span>{{scope.row.num}}</span>
		    	</template>
		    </el-table-column>
        <!-- <el-table-column label="折扣" align="center" width="150">
            <template slot-scope="scope">{{scope.row.litemallGoods.discount == 1 ? '無折扣' :(scope.row.litemallGoods.discount)*10+'折'}}</template>
        </el-table-column> -->
        <!-- <el-table-column label="折扣" align="center">
            <template>1折</template>
        </el-table-column> -->
        
        <el-table-column label="商品總價" align="center">
            <template slot-scope="scope">
              <div class="allPrice">${{scope.row.totalNum}}</div>
            </template>
        </el-table-column>
		    <!-- <el-table-column label="操作" width="200">
		    	<template slot-scope="scope">
            <div class="operationBox">
              <div>移至我的收藏夾</div>
              <div @click="gotoDetele( scope.row )">刪除</div>
            </div>
			    </template>
		    </el-table-column> -->
		  </el-table>
      <!-- 結算內容 -->
      <div class="settlement">
        <div class="settlement_top">
          <div class="settlement_title">
            使用優惠
          </div>
          <div class="settlement_select">
            <el-form :inline="true" :model="discountData" class="demo-form-inline" label-width="100px">
              <el-form-item label="優惠券：">
                <el-select v-model="discountData.quan" :placeholder="discountData.quanText"   clearable>
                  <el-option :value="item.cid" v-for="(item,index) in coulist"  :key='index' :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="優惠碼：">
                <el-input v-model="discountData.code" placeholder="請輸入優惠碼"></el-input>
              </el-form-item>            
            </el-form>
            <div class="quebtn" @click="quebtn">確認</div>  
          </div>
          <div class="settlement_item">
            <div>{{totalNum1}}件商品，總商品金額：</div>
            <div>${{totalPrice1}}</div>
          </div>
          <!-- <div class="settlement_item">
            <div>小計：</div>
            <div>${{totalPrice1}}</div>
          </div> -->
          <div class="settlement_item" v-if="selectGetActive==1">
            <div>運費：</div>
            <div>${{totlist.freightPrice}}</div>
          </div>
          <div class="settlement_item">
            <div>折扣：</div>
            <div>-${{totlist.discount}}</div>
          </div>
          <div class="settlement_item">
            <div>優惠碼{{home}}：</div>
            <div>-${{totlist.promoCodePrice}}</div>
          </div>
          <div class="settlement_item">
            <div>優惠券：</div>
            <div>-${{totlist.couponPrice}}</div>
          </div>
          <div class="settlement_item texiansj">
            <div>付款金額：</div>
            <div class="itotal_price">${{totalPrice2}}</div>
          </div>
          <div class="settlement_item texiansj" >
            <div>所得PV：</div>
            <div class="itotal_price">{{pvtotal}}PV</div>
          </div>
        </div>
        <div class="settlement_bottom" style="background-color: rgb(255, 255, 255);
    margin-top: 15px;">
          <div class="settlement_left">
            <!-- <div @click="gotoDeteleAll()">刪除</div>
            <div>移至我的收藏夾</div> -->
          </div>
          <!-- <div class="settlement_center">已選商品<span>{{cartProducts1.length}}</span>件</div> -->
          <div class="settlement_right">
            <!-- <div>應付金額：<span>${{totalPrice2}}</span></div> -->
            <div></div>
            <div @click="topay(2)" v-loading.fullscreen.lock="fullscreenLoading" style="">前往結算</div>
            <!-- <el-button
              type="primary"
              @click="openFullScreen1"
              v-loading.fullscreen.lock="fullscreenLoading">
              指令方式
            </el-button> -->
          </div>
        </div>  
      </div>
    </div>
		
    <div class="content nohaveshop" v-if="cartProducts1.length == 0">
      <p class="p1">妳的結算信息空空如也~~</p>
      <p class="p2">快去采購吧!</p>
    </div>

    <!-- 添加彈框 -->
    <div class="addressBox"> 
      <el-dialog width="30%" :title="!isEdit?'新增地址':'修改地址'" :visible.sync="dialogFormVisible">
        <el-form :model="user" :rules="rules" ref="userFrom" label-width="150px">   
          <el-form-item label="收貨人：" prop="name">
            <el-input v-model="user.name" placeholder="請輸入收貨人姓名"></el-input>
          </el-form-item>
          <el-form-item label="所在區域：" required>
            <div class="selectAddress" >
              <v-distpicker :placeholders="placeholders" province-disabled @province="onChangeProvince" @city="onChangeCity" @selected="onSelected" :province='user.province' :city='user.city' :area='user.county' ></v-distpicker>
            </div>  
          </el-form-item>
          <el-form-item label="詳細地址：" prop="addressDetail">
            <el-input type="textarea" :rows="4" v-model="user.addressDetail" placeholder="請輸入詳細地址"></el-input>
          </el-form-item>
          <el-form-item label="手機號碼：" prop="tel">
            <el-input v-model="user.tel" placeholder="請輸入手機號碼"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox  v-model="user.isDefault">設為默認地址</el-checkbox>
          </el-form-item>
          <el-form-item>
            <div class="btnbox">
              <div @click="onSubmit('userFrom')" class="savebtn">保存地址</div>
              <div @click="dialogFormVisible = false">取消</div>
            </div>            
          </el-form-item>
        </el-form>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">確 定</el-button>
        </div> -->
      </el-dialog>
    </div>
	</div>
  	
</template>

<script>
  import {findGoodsCarList,addItemsToCart,delGoodsCar,updateGoodsNum,submitOrder,mylist,checkUseCoupon} from '@/api/car'
  import {addresslist,addressAddUpdate,addressDetail,addressDelete,updateDefaultAdd} from '@/api/user';
  import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
  import { getToken,removeToken } from '@/utils/auth' // 驗權
  const defaultUser = {
  name: "",//收貨人
  // province:'香港特別行政區',//省份
  province:'香港特别行政区',//省份
  city:'',//市
  county:'',//區
  addressDetail:'',//詳情
  areaCode:'',//
  tel:'',//電話
  isDefault:true,//默認
  postalCode:'',
  userId:getToken(),
  id:0,
};
	export default {
		name: 'settlement',
	  	data() {
			return {
        picktime:null,
        selectGetActive:0,
        pvtotal:0,
				dialogVisible : false,
        result : null,
        fullscreenLoading: false,
        input_number_value_car:1,//購物車的數量輸入
        multipleSelection:[],//多選
        selectLength:0,//選中幾個
        selectArray:[],//選中的內容
        selectAllPrice:0,//選中的幾個價格
        arr:[],
        totlist:{
           freightPrice:'0.00',
           discount:'0.00',
           promoCodePrice:'0.00',
           couponPrice:'0.00'
        },
        input_number_value:1,
        isHover:-1,
        user_id:5,
        cartProducts1:[],//購物車數據
        totalNum1:0,//幾件
        totalPrice1:0,//總金額
        totalPrice2:0,//應付金額
        user_id:null,
        isShow:true,
        discountData:{
          code:'',
          quan:'',
          quanText:'請選擇優惠券'
        },
        quanOption:[
          {label:'優惠券1',id:'1'},
          {label:'優惠券2',id:'2'},
          {label:'優惠券3',id:'3'}
        ],
        addresslist:[],//地址列表
        isEdit:false,//添加地址標誌
        dialogTableVisible: false,
        coulist:[],
        dialogFormVisible: false,
        user: Object.assign({}, defaultUser),
        addressText:{
          province:'香港特别行政区',//省份
          city:'',//市
          county:'',//區
        },
        placeholders: {
          province:'香港特别行政区',//省份
          city: '請選擇市',
          area: '請選擇區',
        },
        rules: {
          name:[{required: true, message: '請輸入收貨人', trigger: 'blur'}],
          email:[{required: true, message: '請輸入郵箱', trigger:'blur'}, {validator: validateEMail, trigger: 'blur' }],
          tel:[{required:true,message:'請輸入手機號',trigger: 'blur'}],
          addressDetail:[{required: true, message: '請輸入詳細地址', trigger: 'blur'}],
          province:[{required: true, message: '請輸入詳細地址', trigger: 'blur'}],
        },
        formLabelWidth: '120px',
        home:null
			}
		},
		computed:{
			// ...mapGetters([
			// 	'cartProducts','totalNum','totalPrice'
			// ])
    },
    mounted(){
      this.getcardata()
      if(getToken()){
        this.user_id = getToken()
      }else{
        this.user_id = null
      }
       mylist({userId:getToken(),status:0}).then(response => {
          console.log(response.data.list)
          this.coulist = response.data.list
        }) 
    },
		methods: {
      selectGetActives(index){
        
        if(index==0){
          this.$message({
            type:'warning',
            message:'请及时前往自提点取货'
          })
        }
        this.selectGetActive=index
        this.topay(1)
      },
      // 獲取可用優惠券length
      getCouponsLen(){
        var array = []
        this.cartProducts1.forEach(Element => {
          array.push(Element.litemallGoods.id)
        })
        checkUseCoupon({userId:getToken(),goodsId:array}).then(response => {
          if(response.errno == 0){
            this.discountData.quanText = '您當前有'+response.data.length+'張可用優惠券'
          }
          console.log(response)
        })
      },
      // 獲取地址列表
      getaddresslist(){
        addresslist({userId:getToken()}).then(response => {
          if(response.errno == 0){
            this.addresslist = response.data.list
            this.topay(1)
          }
          
        }) 
      },
      quebtn(e){
         console.log(e)
         this.topay(1) 
      },
      // 獲取購物車數據列表
      getcardata(){
        // this.isShow = true
        findGoodsCarList({userId:getToken()}).then(response => {
          if(response.errno == 0){
             this.cartProducts1 = response.data.list
             var array = JSON.parse(localStorage.getItem('select'))
             var newdata = []
             this.cartProducts1.forEach(row => {
              if(array.indexOf(row.goodsCarId) >= 0){
                // this.$refs.singleTable.toggleRowSelection(row,true);
                newdata.push(row)
              }
            })
            this.cartProducts1 = newdata
             this.cartProducts1.forEach( ( item, index ) => {
                item.totalNum = (item.litemallGoods.counterPrice*item.num).toFixed(2)
              });
            this.getCouponsLen()
            this.totalNumss()
            this.totalPricess()
            this.getaddresslist()
          }
          let pv=JSON.parse(localStorage.getItem('pv'))


          for (let index = 0; index < pv.length; index++) {
            const element = pv[index];
            for (let index2 = 0; index2 < this.cartProducts1.length; index2++) {
              const element2 = this.cartProducts1[index2];
              if(element && element.goodsCarId==element2.goodsCarId){
                this.pvtotal+=(element.litemallGoods.pvValue*element2.num)
              }
            }
            
          }
        })
      },
      // 添加購物車
      addToCart(items){
        if(items.isOnSale){
          if(getToken()){
            var array = [items.id+'#'+items.quannum]
            addItemsToCart({idAndNumber:array,userId:getToken()}).then(response => {
              if(response.errno == 0){
                this.$message({
                  type:'success',
                  message:'加入成功，請前往我的購物車進行查看'
                })
                this.getcardata()
              }else{
                this.$message({
                  type:'error',
                  message:response.errmsg
                })
              }
              console.log(response)
            })
          }else{
            this.$message({
              type:'error',
              message:'請您先登錄'
            })
          }  
        }else{
          this.$message({
            type:'error',
            message:'很抱歉該商品已下架'
          })
        }
            
      },
      //設置表格行的樣式
      tableRowStyle({row,rowIndex}){
          return 'background-color:pink;font-size:15px;'
      },
      //設置表頭行的樣式
      tableHeaderColor({row,column,rowIndex,columnIndex}){
        return 'background-color:#C37B5A;text-align:center;height:60px;font-size: 18px;font-weight: 400;color: #FFFFFF;line-height: 60px;'
      },
      // 數量計算
      totalNumss(){
        let total = 0;
        this.cartProducts1.forEach( item => {
            total += item.num
        })
        this.totalNum1 = total
        return this.totalNum1;
      },
      // 總價計算
      totalPricess(){
        let total = 0;
        this.cartProducts1.forEach( item => {
            total += item.litemallGoods.counterPrice * item.num
        })
        this.totalPrice1 = total.toFixed(2)
        this.totalPrice2 = total.toFixed(2)
        return this.totalPrice1;
        return this.totalPrice2;
      },
      // 應付金額
      totalPriceYing(){
        var total = 0;
        this.multipleSelection.forEach( item => {
            total += Number(item.totalNum)
        })
        return this.totalPrice2 = total.toFixed(2)
      },
      // 地址默認
      changeDefault(index,row){
        if(!row.isDefault){
          this.$confirm('確定設置該地址為默認地址, 是否繼續?', '提示', {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            updateDefaultAdd({"id":row.id ,"userId": getToken()}).then(response => {
              if(response.errno == 0){
                this.$message({
                  type:'success',
                  message:'默認地址設置成功'
                })
                this.getaddresslist()
              }else{
                this.$message({
                  type:'error',
                  message:'暫時無法設置默認地址'
                })
              }
            })
          }).catch(() => {
                    
          });
        }      
      },
      // 打開添加地址彈框
      addAddress(){
        this.user = Object.assign({}, defaultUser)
        this.dialogFormVisible = true
        this.isEdit = false
      },
      // 編輯地址彈框
      handleEdit(index, row) {
        addressDetail({"addressId":row.id ,"userId": getToken()}).then(response => {
          if(response.errno == 0){
            this.user = response.data
            this.dialogFormVisible = true
            this.isEdit = true
          }else{
            this.$message({
              type:'error',
              message:'暫時無法編輯'
            })
          }
        })
      },
      // 刪除地址
      handleDelete(index, row) {
        this.$confirm('確定要刪除該地址, 是否繼續?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          addressDelete({"id":row.id ,"userId": getToken()}).then(response => {
            if(response.errno == 0){
              this.$message({
                type:'success',
                message:'刪除成功'
              })
              this.getaddresslist()
            }else{
              this.$message({
                type:'error',
                message:'暫時無法刪除'
              })
            }
          })
        }).catch(() => {
                  
        });
        
      },
      onChangeProvince(data){
        // console.log(data)
      },
      onChangeCity(data){
        // console.log(data)
      },
      onSelected(data) {
        // 選擇省市區
        console.log(data)
        // console.log(data.province.value+data.city.value+data.area.value)
        // this.addressText.province = data.province.value;
        // this.addressText.city = data.city.value;
        // this.addressText.county = data.area.value;
        this.user.province = data.province.value;
        this.user.city = data.city.value;
        this.user.county = data.area.value;
      },
      // 添加修改地址提交按鈕
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.user.province == '' || this.user.city == '' || this.user.county == ''){
              this.$message({
                type:'error',
                message:'請選擇省市區'
              })
            }else{
              if(!this.isEdit){
                this.user.userId = getToken()
                addressAddUpdate(this.user).then(response => {
                  if(response.errno == 0){
                    this.$message({
                      type:'success',
                      message:'添加成功'
                    })
                    this.dialogFormVisible = false
                    this.getaddresslist()
                  }else{
                    this.$message({
                      type:'error',
                      message:response.errmsg
                    })
                  }
                  console.log(response)
                })
              }else{
                this.user.userId = getToken()
                addressAddUpdate(this.user).then(response => {
                  if(response.errno == 0){
                    this.$message({
                      type:'success',
                      message:'修改成功'
                    })
                    this.dialogFormVisible = false
                    this.getaddresslist()
                  }else{
                    this.$message({
                      type:'error',
                      message:response.errmsg
                    })
                  }
                })
              }           
            }
          }else{
            this.$message({
              message: '表單驗證失敗，請修改後重新提交',
                type: 'error',
                duration:1000
            });
            return false;
          }
        });
      },
      topay(e){ 
          if(this.addresslist.length == 0 && this.selectGetActive == 1){
            this.$message({
              type:'error',
              message:'請您完善收貨地址信息'
            })
          }else{
            if(this.selectGetActive==0 && this.picktime==null && e==2){
              this.$message({
                type:'error',
                message:'請您填寫自提時間'
              })
              return
            }
            if(e==2){
              this.fullscreenLoading = true;
            }
            var arr = ''
            this.cartProducts1.forEach((item,index) => {
              if(index == this.cartProducts1.length-1){
                arr+=item.goodsCarId
              }else{
                arr+=item.goodsCarId+'#'
              }
            })
            var addressstr = null
            this.addresslist.forEach(item => {
              if(item.isDefault){
                addressstr = item.id
              }
            })
            let dataParam={
              "userId":Number(getToken()),
              "cartId":arr, 
              "addressId" :this.selectGetActive===0?168:addressstr,
              "userCouponId":Number(this.discountData.quan),
              type:e, 
              "promoCode":this.discountData.code,
              addType:this.selectGetActive===0?1:2,
              picktime:this.picktime
            }
            submitOrder(dataParam).then(response => {
              if(response.errno == 0){
                if(e == 1){
                  if(this.discountData.code != ''){
                    this.home = this.discountData.code
                  }else{
                    this.home = null
                  }
                }
                if(e==2){ 
                  this.fullscreenLoading =false;
                  this.$router.push({path:'/settlepay',query:{orderSn:response.data.orderSn}})
                }else{
                  // this.$message({
                  //   type:"success",
                  //   message:response.errmsg
                  // })
                  this.totalPrice1 = response.data.goodsPrice
                  this.totalPrice2 = response.data.orderTotalPrice
                  this.totlist = response.data
                }
                
              }else{
                this.$message({
                  type:'error',
                  message:response.errmsg
                })
                this.fullscreenLoading = false;
              }
            }) 
          }   
            
      }
	  }
	}
</script>
<style >
.receiveAddress .el-table td, .el-table th{
  padding: 0px 0px!important;
}
</style>
<style scoped>
.selfTit{font-size: 15px;font-weight: 600; margin: 10px 0;}
.flexbox{display:flex}
.selectGet{border:1px solid #A2A2A2;border-radius: 10px; width:140px; height: 70px; display: flex; align-items: center; justify-content: center; color:#A2A2A2 ; margin-right:80px ; cursor: pointer;}
.selectGet img{ width:30px;height: 30px; margin-right: 5px;}
.selectGet:nth-child(2) img{ width:40px;height: 40px; margin-right: 5px;}
.selectGet.active{border:1px solid #BE795A; color:#BE795A ; }
.wrap{
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background: #f5f5f5;
  padding-top: 30px;
}
.content{
  width: 90%;
  box-sizing: border-box;
  margin: 0px auto;
}

/* 修改多選全選框樣式 */
.content>>>.el-checkbox__inner:hover{
  border-color: #E5E5E5;
}
.content>>>.el-checkbox__inner.is-focus,.content>>>.el-checkbox__inner{
  background: #E5E5E5;
  border-color: #E5E5E5;
}
/* 多選選中 */
.content>>>.el-checkbox__inner::after{
  border-color: #FF4400;
}
/* 不全選 */
.content>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
  background: #FF4400;
}
.content>>>.el-checkbox__input.is-checked .el-checkbox__inner, .content>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #E5E5E5;
  border-color: #E5E5E5;
}

/* 每壹行行高設置 */
.content>>>.el-table .cell {
  line-height: 60px;
}

/* 商品信息 */
.goodMsg{
  display: flex;
  align-items: center;
}
.goodMsg img{
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 10px;
  border-radius: 4px;
}

.content>>>.el-table .cell{
  border-radius: 4px;
}
/* 修改每壹行之間的空隙 */
.content>>>.el-table td,.content>>>.el-table th.is-leaf{
  border-bottom: 15px solid #f5f5f5;
}

/* 修改數量加減框樣式 */
.content>>>.el-input-number__decrease,.content>>>.el-input-number__increase{
  background: #fff;
}
/* 加減號樣式修改 */
.content>>>.el-input-number__decrease, .content>>>.el-input-number__increase{
  color:  #FF4400;
}
.content>>>.el-input-number__decrease.is-disabled{
  color: #C0C4CC;
}
.content>>>.el-input-number__decrease:hover:not(.is-disabled), .content>>>.el-input-number__increase:hover{
  color: #FF4400;
}
.content>>>.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .content>>>.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.content>>>.el-input__inner:hover{
  border-color: #DCDFE6;
}
.content>>>.el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.content>>>.el-input__inner:active{
  border-color: #DCDFE6;
}

/* 設置單價樣式 */
.priceBox>div:nth-child(1){
  font-size: 16px;
  font-weight: 600;
  color: #be795a;
  line-height: 30px;
}
.priceBox>div:nth-child(2){
  font-size: 14px;
  font-weight: 600;
  text-decoration: line-through;
  color: #be795a;
  margin: 0px;
  line-height: 30px;
}

/* 設置總價樣式 */
.allPrice{
  font-size: 16px;
  font-weight: bold;
  color: #be795a;
}

/* 操作樣式 */
.operationBox>div:nth-child(1){
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.operationBox>div:nth-child(2){
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
/* 結算內容 */
.settlement{
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}
.settlement_top{
  width: 100%;
  padding: 20px;
  background: white;
  box-sizing: border-box;
  padding-bottom: 40px;
}
.settlement_title{
  font-size: 28px;
  font-weight: bold;
  color: #333333;
  line-height: 45px;
}
.settlement_item{
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  line-height: 28px;
  justify-content: space-between;
  padding: 0px 10px;
}
.settlement_item>div:nth-child(1){
  text-align: right;
  width: 90%;
}
.settlement_item>div:nth-child(2){
  width: 10%;
  text-align: right;
}
.itotal_price{
  color:#be795a;
}
.settlement_bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  background: #EEEEEE;
  border-radius: 4px;
}
.texiansj{
  font-size: 22px;
}
.settlement_left{
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 70px;
  cursor: pointer;
}
.settlement_left>div:nth-child(1){
  margin-right: 20px;
}
.settlement_center{
  font-size: 14px;
  font-weight: 400;
  color: #000003;
  line-height: 70px;
}
.settlement_center>span{
  font-size: 18px;
  font-weight: bold;
  color: #FF4400;
  line-height: 70px;
  margin: 0px 10px;
}
.settlement_right{
  display: flex;
  align-items: center;
}
.settlement_right>div:nth-child(1){
  font-size: 14px;
  font-weight: 400;
  color: #000003;
  line-height: 70px;
  margin-right: 50px;
}
.settlement_right>div:nth-child(1)>span{
  font-size: 14px;
  font-weight: bold;
  color: #be795a;
  line-height: 70px;
}
.settlement_right>div:nth-child(2){
  width: 161px;
  height: 70px;
  background:#be795a;
  border-radius: 0px 4px 4px 0px;
  font-size: 22px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 70px;
  text-align: center;
  cursor: pointer;
}
.settlement_select{
  margin-top: 20px;
  display: flex;
}
.settlement_select>>>.el-form-item__label{
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  line-height: 45px;
}
.quebtn{
  width: 80px;
  height: 40px;
  background: #C37B5A;
  text-align: center;
  line-height: 40px;
  color: white;
}
/* .el-select-dropdown__item.selected{
  color: #FF5252 !important;
}
.el-select-dropdown__item::-webkit-input-placeholder{
  color: #FF5252 !important;
} */
.address{
  width: 90%;
  box-sizing: border-box;
  margin: 0px auto;
  padding:20px;
  background: white;
  margin-bottom: 20px;
}
.address_title{
  display: flex;
  width:calc(90% - 20px);
  margin:0 auto;
  color: #fff;
  padding: 0 10px;
  align-items: center;
  background:rgb(195, 123, 90) ;
  justify-content: space-between;
}
.address_title>div:nth-child(1){
  font-size: 18px;
  font-weight: normal;
  color: #fff;
  line-height: 60px;
}
.address_title>div:nth-child(2){
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  line-height: 60px;
  cursor: pointer;
}
.address_content{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.address_con_item2{
  width: 20.47%;
  box-sizing: border-box;
  height: 200px;
  position: relative;
  border:1px solid #be795a;
  margin-bottom: 15px;
  margin-right: 77.3px;
}
.address_con_item{
   width: 25%;
  box-sizing: border-box;
  height: 200px;
  position: relative;
border:1px solid #9F9F9F;
  margin-bottom: 15px;
  margin-right: 77.3px;
}
.address_con_item.active{
   border:1px solid #be795a;
}
.address_con_item:nth-child(4n){
  margin-right: 0px;
}
.address_img{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 262px;
  height: 200px;
}
.address_con2{
  width: 100%;
  box-sizing: border-box;


}

.address_con{
  width: 100%;
  box-sizing: border-box;



}
.address_name{
  display: flex;
  padding: 10px 15px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #D9D9D9;
  font-size: 15px;
  line-height: 30px;
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.address_name>div:nth-child(1){
  line-height: 30px;
}
.address_pro{
  display: flex;
  align-items: center;
  line-height: 25px;
  font-size: 15px;
  padding: 0 15px;
}
.address_pro>div{
  margin-right: 10px;
}
.address_detail{
  word-break: break-word;
  font-size: 15px;
  color: #999999;
  line-height: 25px;
  padding: 0 15px;
  height: 70px;
}
.address_con2 .address_name{
  padding: 10px 15px;
  border-bottom:1px solid #be795a;
}

.address_con2 .address_pro{

   padding: 0 15px;
}
.address_con2 .address_detail{

   padding: 0 15px;
}
.address_other{
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: space-between;
}
.address_other .rightp{margin-right: 30px;}
.address_other>div:nth-child(1){
  font-size: 14px;
  background: #D9D9D9;
  padding: 5px 10px;
  cursor: pointer;
}
.address_other>div:nth-child(2){
  display: flex;
  align-items: center;
}
.address_other>div:nth-child(2)>div{
  color: #656565;
  cursor: pointer;
}
.address_other>div:nth-child(2)>div:nth-child(2){
  margin-left: 10px;
}
  .addressBox>>>.el-dialog__header{
    border-bottom: 1px solid #E3E3E3;;
  }
  .selectAddress>>>.distpicker-address-wrapper select{
    padding: 0px;
    /* line-height: 30px; */
    font-size: 14px;
    border-radius: 4px;
    border-color: #DCDFE6;
  }
  .selectAddress>>>.distpicker-address-wrapper select:hover{
    border-color: #DCDFE6;
    /* outline-color:#DCDFE6; */
  }
  .selectAddress>>>.distpicker-address-wrapper select:focus {
    /* outline: -webkit-focus-ring-color auto 1px;  */
    /* outline-color:#DCDFE6; */
    outline: none;
  }
  /* select:not(:-internal-list-box) */
  .addressBox>>>.el-checkbox__inner:hover{
    border-color: #E5E5E5;
  }
  .addressBox>>>.el-checkbox__inner.is-focus,.addressBox>>>.el-checkbox__inner{
    background: #E5E5E5;
    border-color: #E5E5E5;
  }
  /* 多選選中 */
  .addressBox>>>.el-checkbox__inner::after{
    border-color: #FF4400;
  }
  /* 不全選 */
  .addressBox>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
    background: #FF4400;
  }
  .addressBox>>>.el-checkbox__input.is-checked .el-checkbox__inner, .addressBox>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: #E5E5E5;
    border-color: #E5E5E5;
  }
  .addressBox>>>.el-checkbox__input.is-checked+.el-checkbox__label{
    color: #606266;
  }
  .addressBox>>>.el-dialog__headerbtn .el-dialog__close:hover{
    color: #FF4400;
  }
  .btnbox{
    display: flex;
    align-items: center;
  }
  .btnbox>div:nth-child(1){
    width: 84px;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 40px;
    background: #C95959;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
  .btnbox>div:nth-child(2){
    width: 62px;
    border: 1px solid #999999;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 300;
    color: #333333;
    line-height: 40px;
    text-align: center;
    margin-left: 20px;
    cursor: pointer;
  }
  .nohaveshop{
    width: 100%;
    text-align: center;
  }
  .nohaveshop p {
    font-size: 22px;
    color: #999;
    text-align: center;
  }
</style>